<!--
  ~ Copyright [2021-present] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div nz-row class="content-header">
  <div nz-col nzOffset="20" [nzSpan]="4">
    <button nz-button nzType="primary" nzSize="large" (click)="openAdd()">
      <i nz-icon nzType="user-add" nzTheme="outline"></i>Add User
    </button>
  </div>
</div>

<nz-table class="content-body" #basicTable [nzFrontPagination]="false" [nzData]="users"
          nzShowSizeChanger
          [nzPageSizeOptions]="[10,20,30,50,100]">
  <thead>
  <tr>
    <th>Username</th>
    <th>Role</th>
    <th>Action</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let user of basicTable.data">
    <td>{{user.name}}</td>
    <td>{{user.roles|json}}</td>
    <td>
      <nz-button-group>
        <button
          nz-popconfirm
          nzPopconfirmTitle="'Are you sure delete this user?'"
          nzPopconfirmPlacement="top"
          [disabled]="isSystem(user)"
          nzType="dashed"
          nz-button
          (nzOnConfirm)="removeUser(user)"
          nzDanger
        >
          <i nz-icon nzType="delete" nzTheme="outline"></i>
        </button>
        <button
          [disabled]="isSystem(user)"
          nz-button
          (click)="unlock(user)"
        >
          <i nz-icon nzType="unlock" nzTheme="outline"></i>
        </button>
        <button
          [disabled]="isSystem(user)"
          nz-button
          (click)="openEditor(user)"
        >
          <i nz-icon nzType="edit" nzTheme="outline"></i>
        </button>
      </nz-button-group>
    </td>
  </tr>
  </tbody>
</nz-table>

